iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

前端幼鳥三十天養成記系列 第 3

DAY3 聖杯布局 - 三個欄的C位爭奪戰(上)

  • 分享至 

  • xImage
  •  

聖杯和雙飛翼,是布局PC常見的方法。上下有header,footer,中間三欄center,left,right並排。
明天會總結兩個的不同,內容有點硬,堅持住看完壓!!各位幼鳥加油唷~~
html布局


基本盤

有點不太懂 可以看個DAY1
聖杯html的基本結構是,<main>、<aside id="left">、<aside id="right">

  1. 用父元素<div id="container">包起來這三個
  2. 三個都有屬性class:"column"

css的第一步設定是

  1. Reset margin=0 padding=0
  2. 設定left right寬度(自訂)
  3. 設定<main> width:100%;
<body>
    <header>header</header>
    <div id="container">
        <main class="column">也可以叫他center <br> 放在最前面是為了SEO</main>
        <aside id="left" class="column">left</aside>
        <aside id="right" class="column">right</aside>
	</div>
	<footer>footer</footer>
</body>
body, h1, h2, h3, p, ul, ol, li, th, td, img{
    margin: 0px;padding: 0px;
}    /*去margin padding 可以複習day1*/
header{
    text-align: center;
    background-color:aquamarine;
}
main{
    background-color: black;
    width: 100%;
    color: darkgrey;
}
#left{
    background-color:crimson;
    width: 300px;
}
#right{
    background-color: cadetblue;
    width: 200px;
 }
footer{
    background-color:darkgoldenrod;
}

聖杯step1建立5個div


Float毒 和它的解藥-Clear

聖杯和雙飛翼都需要用到前一篇的float。不記得float的小小鳥 姊送你個回DAY2的通道。
有個前端傳說:float是魔鬼專門影響別人,clear是小白只會影響自身。~~法力有點弱餒clear。~~前一篇說過,float會影響到後面元素的排版,很明顯footer準備遭殃了。幼鳥們來幫他煉製解藥吧

.column{
    float:left;
    height:100px;  /*讓三欄等高*/
}
footer{
	clear:left;
}

聖杯step2中間三欄float 幫footer clear


拔拔幫你管 - 父元素處理 中間欄大小自適應

#container{
	padding-left:300px;   /*左邊欄寬*/
	padding-right:200px;  /*右邊欄寬*/
}

將<main>的父元素<div id="container">設定左邊padding=左邊欄寬,右邊padding=右邊欄寬。
雖然<main><aside id="left"><aside id="right">有float屬性,父元素是塌陷的,但對子元素還是有那麼點影響力的。

插個話 ?稚鳥的疑惑?

看到網路上有人說聖杯是用padding,但其實我用margin實作結果一樣。希望有看到的大神可以告訴我為甚麼一定要用padding,而不使用或比較不建議使用margin的原因~~tks
聖杯step3空出左右空位


左欄、右欄不要皮了 回去位置上坐好 - margin負值

margin負值,是一個稚鳥覺得有點tricky的地方,要耗點腦力理解地~~

  • margin-left、margin-top: 元素直接向上、左移動
  • margin-right、margin-bottom:元素不動,自身寬度在外界看起來少了x單位
#left{
	position:relative;
	margin-left:-100%;  /*padding最小為0,所以不要問為甚麼不用padding-left*/
	left:-300px;   /*左邊欄寬*/
}
#right{
	margin-right:-200px;  /*右邊欄寬*/
}
  • margin-left:-100%,與<main>的起點對齊,覆蓋在<main>上方。
  • 再用left:-300px往前拉到位,前面需加position:relative,要不然沒意義。
  • margin-right:-200px,外界看起來少200px=隱形,不占空間。但自身不受影響,所以還是看的到。

聖杯step最後 兩邊歸隊


看的到的隱形<aside id="right">為甚麼會往上跑?

在還沒有設置container 時,因為「紅紅」跑去「小黑」上面(透過margin-left:-100%:),「藍灰」應該順勢黏到「小黑」屁股後面。不過有container,「藍灰」只好被迫擠下去。
因為margin-right:-200px,「藍灰」瞬間變阿飄,成為「小黑」專屬背後靈。
聖杯解釋marginRight負值
聖杯解釋marginRight負值_取消


視窗縮小到太小時,聖杯大跑版怎麼辦?

大跑版的原因是,當瀏覽器視窗小到,使中間自適應欄小於左邊欄寬度時,讓margin-left:-100%,無法完成往上一列的目的,導致大跑版。可以在container增加min-width=max{左邊欄寬,右邊欄寬}。

container{
	min-width:200px;
}

時間:9/1 10:48PM
音樂: 運氣來得若有似無 告五人
飲料:白開水
地點:房間的深藍色皮沙發
狀態:第三天結束了,有點沒把握文章大家的接受度,
也怕後面寫不出東西,更有可能的是實作不出來 QQ


上一篇
DAY2 FLOAT佈局 - 搞懂他愛出軌的心
下一篇
DAY4 雙飛翼布局 - 三個欄的C位爭奪戰(下)
系列文
前端幼鳥三十天養成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言